<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isAdd? '新建':'编辑'"
    :width="dialogWidth"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="100px"
    >
      <el-form-item
        v-if="!isAdd"
        key="id"
        label="Id"
        prop="id"
      >
        <el-input
          v-model="form['id']"
          type="text"
          disabled
        />
      </el-form-item>
      <el-form-item
        key="collegeId"
        label="学院"
        prop="collegeId"
        :rules="[{ required: true, message: '请输入学院', trigger: 'change' }]"
      >
        <el-select
          v-model="form['collegeId']"
          placeholder="请选择"
        >
          <el-option
            v-for="o in selectData.collegeId"
            :key="o.value"
            :label="o.text"
            :value="o.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        key="no"
        label="学号"
        prop="no"
        :rules="[{ required: true, message: '请输入学号', trigger: 'change' }, 
                 { pattern: /^20\d{10}$/, message: '学号必修是20开头的12位数字', trigger: 'blur' }]"
      >
        <el-input
          v-model="form['no']"
          type="text"
        />
      </el-form-item>
      <el-form-item
        key="name"
        label="姓名"
        prop="name"
        :rules="[{ required: true, message: '请输入姓名', trigger: 'change' }]"
      >
        <el-input
          v-model="form['name']"
          type="text"
        />
      </el-form-item>
      <el-form-item
        key="age"
        label="年龄"
        prop="age"
        :rules="[{ required: true, message: '请输入年龄', trigger: 'change' }]"
      >
        <el-input-number
          v-model="form['age']"
          :min="5"
          :max="60"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item
        key="birthday"
        label="出生日期"
        prop="birthday"
        :rules="[{ required: true, message: '请输入出生日期', trigger: 'change' }]"
      >
        <el-date-picker
          v-model="form['birthday']"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
    </el-form>
    <el-alert
      v-if="errorMsg"
      :title="'保存失败！' + errorMsg"
      type="error"
      :closable="true"
    >
      <template #default>
        <p
          v-for="(v, k) in errorDetail"
          :key="k"
        >
          {{ v }}
        </p>
      </template>
    </el-alert>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="success"
          @click="submitForm"
        >
          确定
        </el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "FormDialog",
  props: {
    dataApi: {
      request: true,
      type: Object,
      default: null
    },
    selectData: {
      request: false,
      type: Object,
      default: null
    }
  },
  data() {
    return {
      // 对话框宽度
      dialogWidth: '900px',
      // 对话框显示状态
      dialogVisible: false,
      // 对话框对象
      form: {},
      // 添加，还是删除
      isAdd: false,
      errorMsg: '',
      errorDetail: {}
    }
  },
  methods: {
    // clear form
    clearForm() {
      this.errorMsg = ''
      this.errorDetail = []
    },
    // 处理添加
    handleAdd() {
      this.isAdd = true
      this.form = {}
      this.clearForm()
      this.dialogVisible = true
    },
    // 处理编辑
    handleUpdate(row) {
      this.isAdd = false
      this.form = row
      this.clearForm()
      this.dialogVisible = true
    },
    // 添加 编辑提交
    submitForm() {
      // 先验证，再提交
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('验证通过,提交表单')
          this.save()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 提交数据到服务器
    save() {
      if (this.isAdd) {
        // 添加
        this.dataApi.add(this.form).then(this.onSaveSuccess).catch(this.onSaveFailed)
      } else {
        // 更新
        this.dataApi.update(this.form).then(this.onSaveSuccess).catch(this.onSaveFailed)
      }
    },
    onSaveSuccess() {
      this.$emit('save')
      this.dialogVisible = false
    },
    onSaveFailed(err) {
      this.errorMsg = err.message
      this.errorDetail = err.data
    },
  }
}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>